<!--
 * @Author: ShaXin
 * @Date: 2022-01-06 14:08:56
 * @LastEditors: tc
 * @LastEditTime: 2022-04-08 16:17:18
-->
<template>
    <div class="warp">
        <div class="title">
            <div style="height:25px"></div>
            <div class="titleV">{{titleName?titleName:'水库'}}</div>
        </div>
        <div class="contentV">
            <div class="content_left">
                <el-input placeholder="请输入关键词搜索" prefix-icon="el-icon-search" v-model="filterText"> </el-input>
                <el-tree
                    ref="tree"
                    v-loading="treeLoading"
                    :data="data"
                    node-key="code"
                    @node-click="handleNodeClick"
                    highlight-current
                    :default-expanded-keys="defaultExpandedKeys"
                    :filter-node-method="filterNode"
                    :props="defaultProps">
                </el-tree>
            </div>
            <div class="content_right">
                <div class="content_right_left_serch">
                    <span style="color:#333333;font-size: 14px;">日期：</span>
                    <!-- <el-date-picker v-model="value" type="datetime" class="input_dateTime" format="YYYY-MM-DD HH:mm" placeholder="选择日期"> </el-date-picker> -->
                    <el-date-picker @change="onDatepicker" v-model="value" popper-class="input_ys" type="date" placeholder="选择日期"> </el-date-picker>
                    <el-select v-model="value02" class="input_ys" @change="onSelectTime" placeholder="请选择时间">
                        <el-option
                        v-for="item in dateList"
                        :key="item"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="value03" v-if="value03panduan == true" class="input_ys" @change="onSelectTime" placeholder="请选择时间">
                        <el-option
                        v-for="item in dateList02"
                        :key="item"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                    <!-- <el-button type="primary" @click="onDatepicker" :loading="buttonLoding" icon="el-icon-refresh-left">刷新</el-button> -->
                    <span v-if="geologyEntityList.length> 1" style="color:#333333;font-size: 14px;margin-left:10px;">传感器：</span>
                    <el-select v-if="geologyEntityList.length > 1" v-model="geologyEntityCode" class="input_ys" @change="onSelectGeology" placeholder="请选择传感器">
                        <el-option
                        v-for="(item , index) in geologyEntityList"
                        :key="index"
                        :label="item.sensorName"
                        :value="item.sensorCode">
                        </el-option>
                    </el-select>
                </div>
                <div class="content_right_top">
                    <div class="content_right_top_right">
                        <div class="title02" style="height:40px">
                            <div style="height:10px"></div>
                            <div class="titleV">堤坝当前风险等级</div>
                        </div>
                        <div class="echart_risk" v-loading="mixinLoading">
                            <echartRisk v-if="reservoirData" :data="reservoirData" />
                        </div>
                    </div>
                    <div class="content_right_top_left">
                        <div class="title02" style="height:40px">
                            <div style="height:10px"></div>
                            <div class="titleV">地质异常监测<span v-if="monitorTime?monitorTime:value">监测时间：{{monitorTime?monitorTime:value}}</span></div>
                        </div>
                        <div class="content_right_left_bottom">
                            <div class="content_right_left_bottom_top_card" v-loading="mixinLoading">
                                <el-image
                                v-if="getGeologysImge != null"
                                style="width: 100%; height: 100%"
                                :src="`data:image/png;base64,${getGeologysImge}`"
                                fit="fit"/>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="video_content">
                    <div class="video_list"> 
                        <div class="title02" style="height:40px">
                            <div style="height:10px"></div>
                            <div class="titleV">全景摄像头</div>
                        </div>
                        <div class="video_live">
                            <!-- <video ref="videos" id='videoccc' style="width:100%;height:100%" controls playsInline webkit-playsinline autoplay>
                                <source src="http://hls01open.ys7.com/openlive/9639422188de45f69486238d68b91d2d.hd.m3u8" type="" />
                            </video> -->
                            
                            <el-image class="imgGuding" v-if="VideoLoading == false"
                            :src="require('../../assets/img/dashboard/videoplay.png')"
                            fit="fill"
                            @click="onGetVideo('01')"/>
                            <el-image style="height:100%;width:100%"
                            :src="`${camergImge != null && camergImge.image1?'data:image/png;base64,'+camergImge.image1:require('../../assets/img/dashboard/video.png')}`"
                            :preview-src-list="[`${camergImge != null && camergImge.image1?'data:image/png;base64,'+camergImge.image1:require('../../assets/img/dashboard/video.png')}`]"
                            fit="fill"/>
                            <!-- <iframe :src="`https://open.ys7.com/jssdk/theme/h5/live.html?deviceSerial=J21034639&channelNo=2&accessToken=at.53ebkciub5o36x55a82u6ds99436tbqx-8kz0qczvat-0o3o6wu-rng92fj8p&validCode=sunhero`" width="100%" height="100%" frameborder="0"></iframe> -->
                        </div>
                        
                    </div>
                    <div class="video_list"> 
                        <div class="title02" style="height:40px">
                            <div style="height:10px"></div>
                            <div class="titleV">水尺摄像头</div>
                        </div>
                        <div class="video_live">
                            <!-- <video ref="videos" id0='videoccc' style="width:100%;height:100%" controls playsInline webkit-playsinline autoplay>
                                <source src="http://hls01open.ys7.com/openlive/9639422188de45f69486238d68b91d2d.hd.m3u8" type="" />
                            </video> -->
                            <el-image class="imgGuding" v-if="VideoLoading == false"
                            :src="require('../../assets/img/dashboard/videoplay.png')"
                            fit="fill"
                            @click="onGetVideo('02')"/>
                            <el-image style="height:100%;width:100%"
                            :src="`${camergImge != null && camergImge.image2?'data:image/png;base64,'+camergImge.image2:require('../../assets/img/dashboard/video.png')}`"
                            :preview-src-list="[`${camergImge != null && camergImge.image2?['data:image/png;base64,'+camergImge.image2]:require('../../assets/img/dashboard/video.png')}`]"
                            fit="fill"/>
                        </div>
                    </div>
                </div>
                <div class="content_right_middle">
                    <div class="title02" style="height:40px">
                        <div style="height:10px"></div>
                        <div class="titleV">实况详情<span v-if="monitorTime?monitorTime:value">监测时间：{{monitorTime?monitorTime:value}}</span></div>
                    </div>
                    <div class="content_right_right_bottom_card" v-loading="mixinLoading">
                        <div class="bg1">
                            <div class="card_left">
                                <div class="card_left_name">水位</div>
                                <div class="card_left_detail">{{reservoirData != null && reservoirData.z?reservoirData.z:'--'}} m</div>
                            </div>
                            <div class="card_right">
                                    <el-image
                                :src="require('../../assets/img/dashboard/水位.png')"
                                fit="fit"/>
                            </div>
                        </div>
                        <div class="bg2">
                            <div class="card_left">
                                <div class="card_left_name">比汛限</div>
                                <div class="card_left_detail">{{reservoirData != null && reservoirData.waterhead?reservoirData.waterhead:'--'}} m</div>
                            </div>
                            <div class="card_right">
                                    <el-image
                                :src="require('../../assets/img/dashboard/比汛期.png')"
                                fit="fit"/>
                            </div>
                        </div>
                        <div class="bg3">
                            <div class="card_left">
                                <div class="card_left_name">1小时降水</div>
                                <div class="card_left_detail">{{reservoirData != null && reservoirData.r1h?reservoirData.r1h:'--'}} mm</div>
                            </div>
                            <div class="card_right">
                                    <el-image
                                :src="require('../../assets/img/dashboard/降水.png')"
                                fit="fit"/>
                            </div>
                        </div>
                        <div class="bg4">
                            <div class="card_left">
                                <div class="card_left_name">渗压</div>
                                <div class="card_left_detail">{{reservoirData != null && reservoirData.pressure?reservoirData.pressure:'--'}} hPa</div>
                            </div>
                            <div class="card_right">
                                    <el-image
                                :src="require('../../assets/img/dashboard/渗压.png')"
                                fit="fit"/>
                            </div>
                        </div>
                        <div class="bg5">
                            <div class="card_left">
                                <div class="card_left_name">气压</div>
                                <div class="card_left_detail">{{reservoirData != null && reservoirData.p?reservoirData.p:'--'}} hPa</div>
                            </div>
                            <div class="card_right">
                                    <el-image
                                :src="require('../../assets/img/dashboard/气压_.png')"
                                fit="fit"/>
                            </div>
                        </div>
                        <div class="bg6">
                            <div class="card_left">
                                <div class="card_left_name">湿度</div>
                                <div class="card_left_detail">{{reservoirData != null && reservoirData.rhu?reservoirData.rhu:'--'}} %</div>
                            </div>
                            <div class="card_right">
                                    <el-image
                                :src="require('../../assets/img/dashboard/湿度.png')"
                                fit="fit"/>
                            </div>
                        </div>
                        <div class="bg7">
                            <div class="card_left">
                                <div class="card_left_name">风力风向</div>
                                <div class="card_left_detail">{{reservoirData != null && reservoirData.fx?reservoirData.fx:'--'}} {{reservoirData != null && reservoirData.fxGrade?reservoirData.fxGrade:'--'}}</div>
                            </div>
                            <div class="card_right">
                                    <el-image
                                :src="require('../../assets/img/dashboard/风力风向.png')"
                                fit="fit"/>
                            </div>
                        </div>
                        <div class="bg8">
                            <div class="card_left">
                                <div class="card_left_name">温度</div>
                                <div class="card_left_detail">{{reservoirData != null && reservoirData.temp?reservoirData.temp:'--'}} ℃</div>
                            </div>
                            <div class="card_right">
                                    <el-image
                                :src="require('../../assets/img/dashboard/温度.png')"
                                fit="fit"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content_right_bottom" v-for="(item, index) in gnsVos" :key="index">
                    <div class="echart_list">
                        <div class="title02" style="height:40px">
                            <div style="height:10px"></div>
                            <div class="titleV">表面位移监测 {{item.orderNo}} <span v-if="monitorTime?monitorTime:value">监测时间：{{monitorTime?monitorTime:value}}</span></div>
                        </div>
                        <div class="echart_curve">
                            <echartCurve :data="item"/>
                        </div>
                    </div>
                    <div class="echart_list">
                        <div class="title02" style="height:40px">
                            <div style="height:10px"></div>
                            <div class="titleV">垂直位移监测 {{item.orderNo}} <span v-if="monitorTime?monitorTime:value">监测时间：{{monitorTime?monitorTime:value}}</span></div>
                        </div>
                        <div class="echart_curve">
                            <echartCurve02 :data="item"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <skVideo @onChange="onChangeVideo" :typename="typename" :videoUrl="videoUrl"  :visible="isAddShow"></skVideo>
    </div>
</template>
<script>
import { formatTimestamp } from '@/utils/common'
import { Url } from '@/api/url'
import commonApi from '@/api/index'
import homeApi from '@/api/home'
import dashboardsApi from '@/api/dashboard'
import echartCurve from './echartCurve.vue'
import echartCurve02 from './echartCurve02.vue'
import echartRisk from './echartRisk.vue'
import skVideo from '@/components/skVideo.vue'
import EZUIKit from "../../../static/EZUIKit-JavaScript/ezuikit.js"
export default {
    name: 'index',
    components: {
        echartCurve,
        echartCurve02,
        echartRisk,
        skVideo
    },
    data() {
        return {
            isAddShow:false,
            typename:null,
            videoUrl:null,

            Url,
            statusList:[],
            statusConfig:{
                header:['设备状况'],
                data: [],
                align: ['left'],
                // columnWidth: [50],
                rowNum:4,
                oddRowBGC:'#FAFAFA',
                evenRowBGC:'#ECEEF2',
            },
            abnormalList:[],
            abnormalConfig:{
                header:['堤坝风险'],
                data: [],
                align: ['left'],
                // columnWidth: [50],
                rowNum:4,
                oddRowBGC:'#FAFAFA',
                evenRowBGC:'#ECEEF2',
            },
            titleName:null,
            // value:formatTimestamp(new Date(),'yyyy-MM-dd hh:mm'),
            value:formatTimestamp(new Date(),'yyyy-MM-dd'),
            value02:formatTimestamp(new Date(),'h'),
            value03:formatTimestamp(new Date(),'m'),
            value03panduan:true,
            dateList:null,
            dateList02:null,
            radio1:'',
            geologyEntityCode:'',
            geologyEntityList:[],
            getGeologysImge:null,
            camergImge:null,
            StationVideo:'',
            StationVideo02:'',
            VideoLoading:false,
            StationIid:'',
            filterText: '',
            mixinLoading:false,
            treeLoading:false,
            data: [],
            defaultExpandedKeys:[],//默认展开
            defaultProps: {
                children: 'accountFanslist',
                label: 'name'
            },
            reservoirData:null,
            gnsVos:[],
            buttonLoding:false,
            dateTimeds:null,
            monitorTime:null,
        }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    created() {
        this.queryDeptTree()
        this.abnormalData()
    },
    mounted() {
        let xiaos = []
        for (let index = 0; index < 23; index++) {
            xiaos.push(index)
        }
        this.dateList = xiaos
        // var player = new EZUIKit.EZUIPlayer("videoccc")
    },
    methods: {
        onChangeVideo(data){
            this.isAddShow = data.bool
        },
        onGetVideo(val){
            if(val == '01'){
                this.videoUrl = this.StationVideo
            }else if (val == '02'){
                this.videoUrl = this.StationVideo02
            }
            this.typename = val
            this.isAddShow = true
        },
        //异常数据
        abnormalData(){
            homeApi.findRiskErr().then(res => {
                console.log(res.data)
                let listData = res.data
                if(listData.length > 0){
                    this.statusList = listData
                    let dataa = []
                    for (var i = 0; i < listData.length; i++) {
                        let text = ``
                        text = `<div>${listData[i].reservoirName}<span style="color:#FE0005">异常</span></div>`
                        let textdd = text.split(',')
                        dataa.push(textdd)
                    }
                    this.statusConfig.data = dataa
                }
            }).catch(err=>{
            })
            homeApi.findRunErr().then(res => {
                console.log(res.data)
                let listData = res.data
                if(listData.length > 0){
                    this.abnormalList = listData
                    let dataa = []
                    for (var i = 0; i < listData.length; i++) {
                        let text = ``
                        text = `<div>${listData[i].reservoirName}<span style="color:#FE0005">异常</span></div>`
                        let textdd = text.split(',')
                        dataa.push(textdd)
                    }
                    this.abnormalConfig.data = dataa
                }
            }).catch(err=>{
            })
        },
        queryDeptTree() {
            this.treeLoading = true
            commonApi.queryAera().then(res => {
                this.setName(res.data)
                this.data = res.data
                this.getQueryData()
                this.treeLoading = false
            }).catch(err=>{
                this.treeLoading = false
            })
        },
        getQueryData(){
            this.buttonLoding = true
            this.mixinLoading = true
            this.VideoLoading = true
            homeApi.findByIdHour({
                ddatetime:`${this.value} ${this.value02}:${this.value03}`,
                stationId:this.StationIid
            }).then(res => {
                this.reservoirData = res.data
                this.gnsVos = res.data.gnsVos
                this.geologyEntityList = res.data.geologyEntityList
                this.monitorTime = res.data.monitorTime
                this.getfindByCamerg()
                this.getSituationVideo('01')
                this.getSituationVideo('02')
                if(res.data.geologyEntityList.length > 0){
                    this.geologyEntityCode = this.geologyEntityList[0].sensorCode
                    this.getGeologyImge(this.geologyEntityList[0].sensorCode)
                }else {
                    this.getGeologysImge = null
                }
                if(res.data.rates == '1'){
                    this.value03panduan = true
                    let fenZhong = []
                    for (let index = 0; index < 59; index++) {
                        fenZhong.push(index)
                    }
                    this.dateList02 = fenZhong
                }else if(res.data.rates == '2'){
                    this.value03panduan = true
                    this.value03 = parseInt(this.value03/5)*5
                    this.dateList02 = [0,5,10,15,20,25,30,35,40,45,50,55]
                }else {
                    this.value03 = '00'
                    this.value03panduan = false 
                }
                this.mixinLoading = false
                this.buttonLoding = false
            }).catch(err=>{
                this.mixinLoading = false
                this.buttonLoding = false
            })
        },
        getGeologyImge(val){
            // let timen = `${formatTimestamp(this.value,'yyyy-MM-dd')} ${this.value02}:00:00`
            homeApi.getGeologyImge({
                ddatetime:`${this.value} ${this.value02}:${this.value03}`,
                sensorCode:val,
                stationId:this.StationIid
            }).then(res => {
                // console.log(res.data)
                if(res.data){
                    this.getGeologysImge = res.data
                }else {
                    this.getGeologysImge = null
                }
                // this.reservoirData = res.data
            }).catch(err=>{
            })
        },
        //查看视频图片
        getfindByCamerg(){
            dashboardsApi.findByCamerg({
                stationId:this.StationIid
            }).then(res => {
                this.camergImge = res.data
            }).catch(err=>{
                this.$message.error(err.message||'操作失败')
            })
        },
        getSituationVideo(val){
            homeApi.getSituationVideo({
                cameraCode:val,
                stationId:this.StationIid
            }).then(res => {
                if(val == '01'){
                    this.StationVideo = res.data
                }else if(val == '02'){
                    this.StationVideo02 = res.data
                }
                this.VideoLoading = false
            }).catch(err=>{
                this.VideoLoading = false
            })
        },
        // onDatepicker(val){
        //     clearTimeout(this.dateTimeds)
        //     this.dateTimeds = setTimeout(()=>{
        //         this.getQueryData()
        //     },500)
        // },
        onDatepicker(val){
            this.value = formatTimestamp(val,'yyyy-MM-dd')
            this.getQueryData()
        },
        onSelectTime(val){
            this.getQueryData()
        },
        onSelectGeology(val){
            this.getGeologyImge(val)
        },
        
        // onRadio(val){
        //     this.getQueryData()
        // },
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        handleNodeClick(data) {
            if(data.stationId){
                this.StationIid = data.stationId
                this.titleName = `${data.province}${data.city}${data.country}${data.reservoirName}`
                this.getQueryData()
            }
        },
        //省市区查询水库递归
        setName(datas){ //遍历树  获取id数组
            for(var i in datas){
                if(datas[i].accountFanslist){  //存在子节点就递归
                    this.setName(datas[i].accountFanslist);
                }else {
                    if(datas[i].list){
                        datas[i].list.map(item=>{
                            item.name = item.reservoirName
                            item.code = item.stationId
                            if(this.$route.query.stationId && this.$route.query.stationId  == item.stationId){
                                this.StationIid = item.stationId
                                this.titleName = `${item.province}${item.city}${item.country}${item.reservoirName}`
                            }
                        })
                        if(this.titleName == null){
                            this.StationIid = datas[i].list[0].stationId
                            this.titleName = `${datas[i].list[0].province}${datas[i].list[0].city}${datas[i].list[0].country}${datas[i].list[0].reservoirName}`
                        }
                        datas[i].accountFanslist = datas[i].list
                        this.defaultExpandedKeys = [datas[i].accountFanslist[0].code]
                    }
                }
            }
        },
    }
}
</script>
<style lang='scss' scoped>
.warp{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 0px rgba(214, 214, 214, 0.25);
    border-radius: 6px;
}
.title{
    height: 70px;
    .titleV{
        height: 20px;
        line-height: 20px;
        margin-left: 20px;
        padding-left: 10px;
        border-left: 4px solid #0AAFF5 ;
        font-size: 20px;
    }
}
.title02{
    height: 70px;
    .titleV{
        height: 20px;
        line-height: 20px;
        padding-left: 10px;
        border-left: 4px solid #0AAFF5 ;
        font-size: 18px;
        >span {
            font-size: 14px;
            margin-left: 10px;
            color: #666666;
        }
    }
}
.contentV{
    height: calc(100% - 90px);
    padding: 0px 20px 20px 20px;
    display: flex;
    justify-content: space-between;
}
.content_left{
    width: 220px;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #E4E4E4;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}
.content_right {
    width: calc(100% - 240px);
    display: flex;
    flex-flow: column;
    overflow-y: auto;
    .content_right_left_serch{
        display: flex;
        align-items: center;
        flex-flow: wrap;
        ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner  {
            width: 130px;
            margin-right: 10px;
        }
        // ::v-deep .input_dateTime {
        //     width: 170px;
        //     margin-right: 10px;
        // }
        .input_ys {
            width: 100px;
            margin-right: 10px;
        }
    }
    .content_right_top {
        display: flex;
        height: 350px;
        justify-content: space-between;
        .content_right_top_left {
            width: 56%;
            .content_right_left_bottom {
                border-radius: 10px;
                padding: 10px;
                box-sizing: border-box;
                border: 1px solid #E4E4E4;
                height: calc(100% - 40px);
                .content_right_left_bottom_top_card {
                    height: 100%;
                }
            }
        }
        .content_right_top_right {
            width: 40%;
            .echart_risk {
                border-radius: 10px;
                border: 1px solid #E4E4E4;
                height: calc(100% - 40px);
            }  
        }
    }
    .content_right_middle {
        .content_right_right_bottom_card{
            height: 280px;
            border-radius: 10px;
            border: 1px solid #E4E4E4;
            display: flex;
            align-content: space-evenly;
            justify-content:space-evenly;
            flex-flow: wrap;
            >div {
                width: calc(25% - 38px);
                height: 100px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .card_left {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: flex-start;
                        padding-left: 20px;
                        height: 75%;
                        .card_left_name {
                            line-height: 18px;
                            color: #FFFFFF;
                            font-size: 16px;
                        }
                        .card_left_detail {
                            font-size: 28px;
                            font-weight: bold;
                            color: #FFFFFF;
                        }
                }
                .card_right {
                    padding-right: 15px;
                }
            }
            .bg1{
                background: linear-gradient(0deg, #49B0F8, #2B98EC);
            }
            .bg2{
                background: linear-gradient(0deg, #FF9055, #FE6453);
            }
            .bg3{
                background: linear-gradient(0deg, #22BD84, #37D69C);
            }
            .bg4{
                background: linear-gradient(0deg, #22BD84, #37D69C);
            }
            .bg5{
                background: linear-gradient(0deg, #22BD84, #37D69C);
            }
            .bg6{
                background: linear-gradient(0deg, #49B0F8, #2B98EC);
            }
            .bg7{
                background: linear-gradient(0deg, #FFB653, #FF9041);
            }
            .bg8{
                background: linear-gradient(0deg, #49B0F8, #2B98EC);
            }
        }
    }
    .content_right_bottom {
        display: flex;
        height: 300px;
        flex-shrink: 0;
        justify-content: space-between;
        .echart_list {
            width: 48%;
            .echart_curve {
                height: calc(100% - 40px);
                border-radius: 10px;
                padding: 10px;
                box-sizing: border-box;
                border: 1px solid #E4E4E4;
            }
        }
    }
    .video_content {
        display: flex;
        justify-content: space-between;
        .video_list {
            width: 48%;
        }
        .video_live {
            position: relative;
            height: 240px;
            border-radius: 10px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #E4E4E4;
            .imgGuding {
                position: absolute;
                z-index: 2;
                bottom: 10%;
                right: 10%;
            }
        }
    }
}
::v-deep .gai_yangs {
    width:100%;
    height:100%;
    color: #333;
    .header{
        background-color: rgba($color: #fff, $alpha: 0) !important;
        // background: linear-gradient(90deg, rgba($color: #00E4FF, $alpha: 0.3), rgba($color: #ED76FF, $alpha: 0.3));
    }
    // .row-item {
    //     border-bottom: 5px solid #fff;
    // }
    .ceil{
        >div {
            width: 100%;
        }
    }
}
</style>